<template>
  <div class="profile-page">
    <!-- 头部导航 -->
    <div class="header">
      <div></div>
      <div class="header-title">个人中心</div>
      <div class="back-btn" style="visibility: hidden">
        <i class="fas fa-arrow-left"></i>
      </div>
    </div>

    <div class="container">
      <!-- 功能菜单 -->
      <div class="menu-card">
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fas fa-clipboard-list"></i>
          </div>
          <div class="menu-text" @click="gousermsg">个人信息</div>
          <div class="menu-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fas fa-calendar-check"></i>
          </div>
          <div class="menu-text" @click="openyyjl">预约记录</div>
          <div class="menu-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fas fa-clipboard-list"></i>
          </div>
          <div class="menu-text" @click="openvotelogList">测评记录</div>
          <div class="menu-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
        <!-- 修改：将"关于我们"改为"管理端" -->
        <div
          class="menu-item"
          @click="switchToManager"
          v-if="manager == 'true'"
        >
          <div class="menu-icon">
            <i class="fas fa-cog"></i>
            <!-- 更换图标为设置图标 -->
          </div>
          <div class="menu-text">管理端</div>
          <div class="menu-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
        <div class="menu-item" @click="handleLogout">
          <div class="menu-icon">
            <i class="fas fa-sign-out-alt"></i>
          </div>
          <div class="menu-text">退出登录</div>
          <div class="menu-arrow">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部TabBar -->
    <div class="tab-bar">
      <div
        class="tab-item"
        :class="{ active: activeTab === 'home' }"
        @click="switchTab('home')"
      >
        <div class="tab-icon">
          <i class="fas fa-home"></i>
        </div>
        <div class="tab-text">首页</div>
      </div>
      <div
        class="tab-item"
        :class="{ active: activeTab === 'profile' }"
        @click="switchTab('profile')"
      >
        <div class="tab-icon">
          <i class="fas fa-user"></i>
        </div>
        <div class="tab-text">我的</div>
      </div>
    </div>

    <!-- 消息提示 -->
    <transition name="fade">
      <div
        v-if="showMessage"
        class="message-toast"
        :style="{ background: messageColor }"
      >
        {{ messageText }}
      </div>
    </transition>

    <!-- 确认对话框 -->
    <transition name="fade">
      <div
        v-if="showConfirmDialog"
        class="confirm-dialog-overlay"
        @click.self="cancelConfirm"
      >
        <div class="confirm-dialog">
          <div class="dialog-text">{{ confirmText }}</div>
          <div class="dialog-buttons">
            <button class="dialog-btn cancel-btn" @click="cancelConfirm">
              取消
            </button>
            <button class="dialog-btn confirm-btn" @click="executeConfirm">
              确定
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "ProfilePage",
  data() {
    return {
      manager: null,

      userInfo: {
        name: "张晓",
        id: "PSY202308001",
      },
      stats: {
        crisisCount: 12,
        assessmentCount: 5,
      },
      showMessage: false,
      messageText: "",
      messageColor: "",
      messageTimer: null,
      showConfirmDialog: false,
      confirmText: "",
      confirmCallback: null,
      activeTab: "profile", // 默认选中"我的"标签
    };
  },
  created() {
    this.manager = localStorage.getItem("manager");
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleEditProfile() {
      this.showToast("进入编辑资料页面", "#5b67ff");
    },

    // 新增：切换到管理端的方法
    switchToManager() {
      this.showConfirm("确定要切换到管理端吗？", () => {
        // 确认后的回调函数
        this.$router.push("/managerHome");
        this.showToast("已切换到管理端", "#48d597");
      });
    },

    handleLogout() {
      this.showConfirm("确定要退出登录吗？", () => {
        this.showToast("已退出登录", "#48d597");
        // 清空缓存
        localStorage.clear();
        // 跳转到登录页面
        this.$router.push({ name: "登录" });
      });
    },

    showToast(text, color) {
      this.messageText = text;
      this.messageColor = color;
      this.showMessage = true;

      if (this.messageTimer) clearTimeout(this.messageTimer);
      this.messageTimer = setTimeout(() => {
        this.showMessage = false;
      }, 3000);
    },

    showConfirm(text, confirmCallback) {
      this.confirmText = text;
      this.confirmCallback = confirmCallback;
      this.showConfirmDialog = true;
    },

    executeConfirm() {
      if (this.confirmCallback) {
        this.confirmCallback();
      }
      this.showConfirmDialog = false;
    },

    cancelConfirm() {
      this.showConfirmDialog = false;
      this.confirmCallback = null;
    },

    openyyjl() {
      this.$router.push({ name: "预约记录" });
    },
    gousermsg() {
      this.$router.push("/usermsg");
    },

    openvotelogList() {
      this.$router.push({ name: "测评记录" });
    },

    switchTab(tab) {
      this.activeTab = tab;
      if (tab === "home") {
        // 跳转到首页
        this.$router.push({ name: "员工端-首页" });
      }
      // 如果已经是个人中心页面，不需要跳转
    },
  },
  beforeUnmount() {
    if (this.messageTimer) clearTimeout(this.messageTimer);
  },
};
</script>

<style scoped>
/* 原有的样式保持不变，只需要修改管理端图标的颜色 */
.profile-page {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f9faff 0%, #f5f7ff 100%);
  color: #1a233d;
  line-height: 1.6;
  min-height: 100vh;
  font-size: 15px;
  padding-bottom: 70px; /* 为底部TabBar留出空间 */
}

.container {
  padding: 0 16px;
  margin: 0 auto;
}

/* 头部导航 */
.header {
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a233d;
}

.back-btn {
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
}

/* 用户信息卡片 */
.profile-card {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
  text-align: center;
  position: relative;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #eef0ff;
  margin: 0 auto 15px;
  display: block;
}

.profile-name {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1a233d;
}

.profile-id {
  font-size: 0.9rem;
  color: #8a94a6;
  margin-bottom: 20px;
}

.edit-profile {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
}

/* 用户状态信息 */
.profile-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e7ebf3;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #5b67ff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  color: #8a94a6;
}

/* 功能菜单 */
.menu-card {
  background: white;
  border-radius: 18px;
  padding: 5px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.menu-item {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e7ebf3;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background: #eef0ff;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  margin-right: 15px;
  font-size: 1.1rem;
}

.menu-text {
  flex: 1;
  font-size: 1.05rem;
  color: #1a233d;
}

.menu-arrow {
  color: #b0b8c5;
}

/* 底部TabBar */
.tab-bar {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-icon {
  font-size: 1.2rem;
  margin-bottom: 4px;
  color: #b0b8c5;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 0.85rem;
  color: #b0b8c5;
  transition: all 0.3s ease;
}

.tab-item.active .tab-icon,
.tab-item.active .tab-text {
  color: #5b67ff;
  font-weight: 600;
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* 确认对话框 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog {
  background: white;
  border-radius: 18px;
  padding: 25px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.dialog-text {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: #1a233d;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.dialog-btn {
  padding: 12px 25px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f8fafc;
  color: #8a94a6;
}

.cancel-btn:hover {
  background: #e0e4eb;
}

.confirm-btn {
  background: #ff6b6b;
  color: white;
}

.confirm-btn:hover {
  background: #e05a5a;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .profile-name {
    font-size: 1.4rem;
  }

  .profile-avatar {
    width: 90px;
    height: 90px;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .menu-text {
    font-size: 1rem;
  }

  .profile-stats {
    gap: 20px;
  }
}
</style>
